<!DOCTYPE html>
<html>
  <head>
    <title>随风飘扬吖-html邮件demo</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <style>
      .form__input {
        display: block;
        width: 300px;
        margin: 10px 0;
      }

      .form__input--textarea {
        height: 150px;
      }

      .field {
        margin-bottom: 10px;
      }

      .field label {
        display: block;
        font-size: 12px;
        color: #777;
      }

      .field input {
        display: block;
        min-width: 250px;
        line-height: 1.5;
        font-size: 14px;
      }

      input[type="submit"] {
        display: block;
        padding: 6px 30px;
        font-size: 14px;
        background-color: #4460aa;
        color: #fff;
        border: none;
      }
    </style>
    <!--Reference local file-->
    <script type="text/javascript" src="js/email.min.js"></script>
    <script type="text/javascript" src="js/email.js"></script>

    <script type="text/javascript">
      setTimeout(
        "alert('该项目为公共项目，为了所有人的利益，请不要频繁利用此网页发送邮件。公共资源是有限的，每个月的免费邮件是有配额的，消耗完就没有了。')",
        5000
      );
    </script>
    <meta http-equiv="refresh" content="65" />

    <script type="text/javascript">
      (function () {
        emailjs.init("user_ANrWGhalWhnHI8MwYCV5P");
      })();
    </script>
  </head>
  <body>
    <div>
      <header>
        <h2>发送邮件</h2>
        <strong>作者：<a href="https://sfpyy.gitee.io">随风飘扬吖</a></strong>
           <h2 style="color:red">您发送的邮件将抄送一份发往管理员邮箱，请您注意邮件内容。</h2>
      </header>
      <form id="form">
        <div class="field">
          <label for="to">收件人邮箱</label>
          <input name="to" id="to" type="email" />
        </div>
        <div class="field">
          <label for="topic">标题</label>
          <input type="text" maxlength="5" name="topic" id="topic" />
        </div>
        <div class="field">
          <label for="message">你想说的话</label>
          <input type="text" name="message" maxlength="5" id="message" />
        </div>
        <div class="field">
          <label for="name">你的署名</label>
          <input type="text" maxlength="5" name="name" id="name" />
        </div>
        <!--
                <div class="field">

                    <label for="reply_to">reply_to</label>

                    <input type="text" name="reply_to" id="reply_to">

                </div> -->

        <input type="submit" id="button" value="发送 Email" />
      </form>
      <!--Here is the previous cloud file. Now it refers to the local file-->
      <!--  <script-->
      <!--          type="text/javascript"-->
      <!--          src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"-->
      <!--  ></script>-->
      <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script> -->

      <script type="text/javascript">
        emailjs.init("user_ANrWGhalWhnHI8MwYCV5P");
        const btn = document.getElementById("button");
        document
          .getElementById("form")
          .addEventListener("submit", function (event) {
            document.getElementById("message").value = "邮件的正文内容";
            event.preventDefault();
            btn.value = "正在发送...";

            const serviceID = "service_7q7h3nx";
            const templateID = "template_umhl4yk";
            emailjs.sendForm(serviceID, templateID, this).then(
              () => {
                btn.value = "Send Email";
                alert("发送成功!");
              },
              (err) => {
                btn.value = "Send Email";
                alert(JSON.stringify(err));
              }
            );
          });
      </script>
    </div>
  </body>
</html>
